<template>
	<view class="index home-bg" :style="[navBackground]">


		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="enable" v-if="showLogo">
			<view class="flex1 row top-bar" :class="scrollTop > 100 ? 'top-bar-2' : ''">
				<!-- 定位 -->
				<navigator class="position-box" hover-class="none"
					@click="goPage('/bundle/pages/message_center/message_center')">
					<text class="text">江苏省常州市新北区</text>
					<u-icon class="icon" color="#fff" size="20" name="arrow-down-fill"></u-icon>
				</navigator>
				<!-- 搜索 -->
				<navigator class="search-box" hover-class="none" url="/package_goods/pages/goods_search/index">
					<u-search wrap-bg-color="transparent" :bg-color="'#fff'" :disabled="true" :height="62"></u-search>
				</navigator>
				<!-- 消息 -->
				<navigator class="message-box" hover-class="none"
					@click="goPage('/bundle/pages/message_center/message_center')">
					<view class="text">9</view>
					<u-icon class="icon" color="#fff" size="48" name="bell"></u-icon>
				</navigator>
			</view>
		</u-sticky>

		<view class="contain">
			<view class="main">
				<bubble-tips top="50rpx" :discharge="isDischarge" />
				<swipers :pid="1" height="322rpx" padding="20rpx 0"></swipers>
				<!-- 导航入口 -->
				<view class="nav bg-white" v-if="navList.length">
					<swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
						<swiper-item v-for="(items, index) in navList" :key="index">
							<view class="nav-list row wrap">
								<view v-for="(item, index2) in items" :key="index2" @tap="tapMenu(item)"
									class="nav-item column-center">
									<image class="nav-icon" :src="item.image"></image>
									<view class="name xs">{{item.name}}</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="dots" v-if="navList.length > 1">
						<view v-for="(item, index) in navList" :key="index"
							:class="'dot ' + (index == currentSwiper ? 'active' : '')"></view>
					</view>
				</view>

				<!-- 资讯 -->
				<navigator v-if="news.length" class="information bg-white row mt20" hover-class="none"
					open-type="navigate" url="/pages/news_list/news_list">
					<image class="icon-toutiao" src="/static/images/icon_toutiao.png" />
					<text class="gap-line"></text>
					<view class="news flex1">
						<view class="shade"></view>
						<swiper autoplay="true" style="height: 76rpx; flex: 1" vertical="true" circular="true"
							:interval="3 * 1000">
							<swiper-item v-for="(item, index) in news" :key="index" class="row">
								<view class="flexnone">
									<u-tag v-if="item.is_new" shape="circle" text="最新" size="mini" type="primary"
										mode="plain" />
								</view>
								<view class="text-swiper ml10 line1">{{item.title }}</view>
							</swiper-item>
						</swiper>
					</view>
					<u-icon class="ml20" name="play-right-fill" size="22" color="#666"></u-icon>
				</navigator>

				<!-- 广告位 -->
				<swipers :is-swiper="false" :pid="23" height="170rpx" padding="20rpx 0 0"></swipers>

				<!-- 活动专区 -->
				<view class="special-area mt20">
					<view>
						<scroll-view style="white-space: nowrap;" :scroll-x="true">
							<navigator class="item bg-white" v-for="(item, index) in activityArea" :key="index"
								hover-class="none"
								:url="`/bundle/pages/activity_detail/activity_detail?id=${item.id}&name=${item.title}&title=${item.name}`">
								<view class="con column-center">
									<custom-image width="300rpx" height="300rpx" :src="item.image"></custom-image>
									<view class="title xxl">{{item.name}}</view>
									<view class="desc primary xxs line1">{{item.title}}</view>
								</view>
							</navigator>
						</scroll-view>
					</view>
				</view>

				<!-- 热销 -->
				<view class="hot mt20" v-if="hotGoods.length && seting.hots">
					<!-- 				<active-area type="hot" progressBarColor="#9912FE" :lists="hotGoods">
						<navigator slot="header" hover-class="none" class="row activity-header" open-type="navigate"
							url="/bundle/pages/hot_list/hot_list">
							<view class="row title flex1">
								<image class="title-image" mode="widthFix" src="/static/images/hot_title.png"></image>
								<view class="ml20 muted xs">热销火爆商品</view>
							</view>
							<view class="row xs">
								更多
								<u-icon name="arrow-right" size="28"></u-icon>
							</view>
						</navigator>
					</active-area> -->


					<view class="row activity-header">
						<view class="tab-container">
							<view class="tab-item" :class="tabHotActiveIndex === 0 ? 'active' : ''"
								@tap="onClickHotTabItem(0)">热销榜单</view>
							<view class="tab-item" :class="tabHotActiveIndex === 1 ? 'active' : ''"
								@tap="onClickHotTabItem(1)">热租榜单</view>
							<view class="desc">{{tabHotActiveIndex === 0 ? '热销' : '热租'}}火爆商品</view>
						</view>
						<navigator hover-class="none" class="row xs" open-type="navigate"
							url="/bundle/pages/hot_list/hot_list">
							更多
							<u-icon name="arrow-right" size="28"></u-icon>
						</navigator>
					</view>

					<goods-list v-if="tabHotActiveIndex === 1" type="home-hot" item-type="zl"
						:list="hotGoods"></goods-list>
					<goods-list v-if="tabHotActiveIndex === 0" type="home-hot" item-type="gm"
						:list="hotGoods"></goods-list>
				</view>




				<!-- 新品推荐 -->
				<view v-if="newGoods.length && seting.news" class="new-goods">
					<!-- <active-area type="news" progressBarColor="#9912FE" :lists="newGoods">
						<navigator slot="header" hover-class="none" class="row activity-header" open-type="navigate"
							url="">
							<view class="row title flex1">
								<image class="title-image" mode="widthFix" src="/static/images/new_title.png"></image>
								<view class="ml20 muted xs">最新发布商品 抢先体验</view>
							</view>
							<view class="row xs">
								更多
								<u-icon name="arrow-right" size="28"></u-icon>
							</view>
						</navigator>
					</active-area> -->

					<view class="row activity-header">
						<view class="tab-container">
							<view class="tab-item active">新品推荐</view>
							<view class="desc">最新发布商品 抢先体验</view>
						</view>
					</view>

					<scroll-view style="white-space: nowrap;" scroll-x="true" scroll-with-animation="true">
						<view class="goods-item-wrap" v-for="(item, index) in newGoods" :key="index">
							<goods-item :url="'/package_goods/pages/goods_detail/index?id=' + item.id" :item="item">
							</goods-item>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 好物优选 -->
			<view class="goods mt20" v-if="goodsList.length">
				<view class="goods-title row-center">
					<text class="line"></text>
					<view class="row">
						<image class="mr10 icon" mode="widthFix" src="/static/images/icon_like.png"></image>
						<text class="bold xxl">好物优选</text>
					</view>
					<text class="line"></text>
				</view>
				
<view class="goods-list">
	

				<view class="goods-item-wrap" v-for="(item, index) in goodsList" :key="index">
					<goods-item width="344rpx" :url="'/package_goods/pages/goods_detail/index?id=' + item.id" :item="item">
					</goods-item>
				</view>
				</view>
				<loading-footer :status="status"></loading-footer>
			</view>
		</view>

		<!-- 购物车  浮动按钮 -->
		<navigator open-type="navigate" hover-class="none" url="/pages/shop_cart/shop_cart">
			<view class="cart-tap">
				<u-icon name="shopping-cart" />
			</view>
		</navigator>

		<!-- #ifdef APP-PLUS -->
		<lyg-popup v-if="appConfig.app_agreement" title="服务协议和隐私政策"
			protocolPath='/bundle/pages/server_explan/server_explan?type=0'
			policyPath='/bundle/pages/server_explan/server_explan?type=1' policyStorageKey="has_read_privacy">
		</lyg-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getHome,
		getMenu,
		getBestList
	} from '@/api/store';
	import {
		loadingType
	} from '@/utils/type'
	import {
		loadingFun,
		menuJump,
		arraySlice,
		setTabbar,
		getRect
	} from '@/utils/tools'
	import {
		toLogin
	} from '@/utils/login'
	import Cache from '@/utils/cache'
	const app = getApp()
	export default {
		options: {
			"styleIsolation": "apply-shared"
		},
		data() {
			return {
				navSwiperH: 374,
				logo: "",
				navHeight: 0,
				currentSwiper: 0,
				page: 1,
				status: loadingType.LOADING,
				remainTime: "",
				navBg: 0,
				navList: [],
				news: [],
				goodsList: [],
				seckill: {},
				seckillGoods: [],
				hotGoods: [],
				newGoods: [],
				activityArea: [],
				showCoupop: false,
				isDischarge: true,
				enable: true,
				isShowDownload: false,
				scrollTop: 0,

				tabHotActiveIndex: 0,
			}
		},
		async onLoad(options) {
			this.headerAction = wx.createAnimation({
				delay: 0,
				duration: 100,
				timingFunction: "ease-in-out"
			})

			setTabbar()
			this.navHeight = app.globalData.navHeight
			this.isDischarge = false;
			await this.getMenuFun()
			this.getBestListFun()
			console.log(this.appConfig)
			// #ifdef H5
			if (options && options.isapp == 1) {
				this.isShowDownload = true;
			}
			// #endif
		},
		async onShow() {
			this.$nextTick(function() {
				getRect('.index').then((res) => {
					if (res.top == 0) {
						this.navBg = 0
					}

					this.scrollTop = res.top
				})
			})

			// #ifdef H5
			this.enable = true
			// #endif
			await this.getHomeFun()
			await this.getCartNum()
		},
		onHide() {
			// #ifdef H5
			this.enable = false
			// #endif
		},
		onReachBottom() {
			this.getBestListFun()
		},
		onPullDownRefresh() {
			this.getHomeFun()
			this.getMenuFun()
		},
		onShareAppMessage() {
			console.log(this.inviteCode)
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_bg,
			};
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			if (!this.enable) return
			let percent = scrollTop / top
			this.navBg = percent > 1 ? 1 : percent
			this.scrollTop = scrollTop

		},
		destroyed() {
			this.isDischarge = true;
		},
		methods: {
			...mapActions(['getCartNum']),


			onClickHotTabItem(index) {
				this.tabHotActiveIndex = index
			},
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				uni.stopPullDownRefresh()
				if (code == 1) {
					const {
						news,
						seckill = {},
						host_goods,
						shop_logo,
						new_goods,
						activity_area
					} = data;
					this.remainTime = Math.abs(seckill.end_time - Date.parse(new Date()) / 1000);
					this.logo = shop_logo
					this.news = news
					this.seckillGoods = seckill.goods
					this.seckill = seckill
					this.hotGoods = host_goods
					this.newGoods = new_goods
					this.activityArea = activity_area

				}
			},
			async getMenuFun() {
				const {
					code,
					data
				} = await getMenu({
					type: 1
				});
				uni.stopPullDownRefresh()
				if (code == 1) {
					//   截取数组
					if (data.length <= 5) {
						this.navSwiperH = 200
					} else {
						this.navSwiperH = 374
					}
					this.navList = arraySlice(data);
				}
			},
			async getBestListFun() {
				let {
					page,
					goodsList,
					status
				} = this
				const data = await loadingFun(getBestList, page, goodsList, status)
				if (!data) return
				this.page = data.page
				this.goodsList = data.dataList
				this.status = data.status
			},
			async tapMenu(item) {
				if (!this.isLogin) return toLogin()
				menuJump(item)
			},
			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				})
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current
			},


			selfLocation() {
				let self = this
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						this.latitude = res.latitude
						this.longitude = res.longitude
						// getGeocoder({
						// 	lat: latitude,
						// 	long: longitude
						// }).then(res => {
						// 	console.log(res)
						// 	this.detaile_address = res.data.address;
						// 	this.recommend_address = res.data.address.length > 4 ? res.data.address.slice(0,4) + '...' : res.data.address
						// })
					},
					fail: (res) => {
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 1000
						});
					},
					complete: (res) => {
						this.getServiceList();
					}
				});
			},
		},
		computed: {
			...mapGetters(["cartNum", "inviteCode", "appConfig"]),
			navBackground() {
				return this.seting.top_bg_image ? {
					'background-image': `url(${this.seting.top_bg_image})`
				} : {}
			},
			showLogo() {
				return this.seting.logo
			},
			navSearch() {
				if (this.showLogo === 0) return true

				return this.navBg < 1 ? false : true
			},
			seting() {
				const {
					index_setting
				} = this.appConfig
				return index_setting
			}
		}
	}
</script>

<style lang="scss">
	@import "index.scss";

	.home-bg {
		background-repeat: no-repeat;
		background: url(../../static/images/my_topbg.png) no-repeat;
		background-size: 100% auto;
	}

	.index {

		background-size: 100% auto;

		.logo-wrap {
			position: absolute;
			padding: 0 30rpx;

			.logo {
				width: auto;
				height: 52rpx;
			}
		}


		.header {
			.navigation-bar {
				padding-top: var(--status-bar-height);
				box-sizing: border-box;
			}
		}

		.contain {

			.main {
				position: relative;
				z-index: 9;
				padding: 0 20rpx;

				.nav {
					position: relative;
					border-radius: 14rpx;
					// #ifdef MP-ALIPAY
					padding-bottom: 40rpx;
					// #endif

					.nav-item {
						width: 20%;
						margin-top: 30rpx;

						.nav-icon {
							width: 82rpx;
							height: 82rpx;
							margin-bottom: 15rpx;
						}
					}

					.dots {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 20rpx;
						display: flex;

						.dot {
							width: 10rpx;
							height: 6rpx;
							border-radius: 6rpx;
							margin-right: 10rpx;
							background-color: rgba(255, 44, 60, 0.4);

							&.active {
								width: 20rpx;
								background-color: $-color-primary;
							}
						}

					}

				}

				.information {
					height: 76rpx;
					box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.06);
					padding: 0 20rpx;
					box-sizing: border-box;
					border-radius: 14rpx;

					.news {
						position: relative;

						.shade {
							position: absolute;
							width: 100%;
							height: 100%;
							z-index: 100;
						}
					}

					.icon-toutiao {
						width: 114rpx;
						height: 34rpx;

					}

					.gap-line {
						height: 28rpx;
						width: 1px;
						background-color: #DCDDDC;
						margin: 0 30rpx;
					}
				}

				.special-area {
					.item {
						width: 300rpx;
						border-radius: 20rpx;
						display: inline-block;
						overflow: hidden;
						margin-right: 20rpx;
						padding-bottom: 25rpx;

						.title {
							padding: 10rpx 0;
						}

						.desc {
							background-color: #E0EEF7;
							padding: 6rpx 20rpx;
							border-radius: 60rpx;
							max-width: 260rpx;
						}
					}

				}



				.activity-header {
					height: 90rpx;
					padding: 0 20rpx;
				}

				.seckill {
					.dec {
						background-color: #FFFBDB;
						width: 150rpx;
					}
				}

				.hot,
				.new-goods {
					.title-image {
						width: 144rpx;
						height: 55rpx;
					}
				}
				
				.new-goods{
					
					.goods-item-wrap{
						margin-right: 16rpx;
						width: 240rpx;
						display: inline-block;
						border-radius: 10rpx;
						overflow: hidden;
						
						&:first-of-type {
							margin-left: 20rpx;
						}
							
						&:last-of-type {
							margin-right: 20rpx;
						}
					}
				}
			}

			.goods {
				.goods-title {
					height: 100rpx;

					.line {
						width: 58rpx;
						height: 1px;
						background-color: #ccc;
						margin: 0 22rpx;
					}

					.icon {
						width: 38rpx;
						height: 38rpx;
					}
				}
				.goods-list{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					padding: 0 20rpx;
					box-sizing: border-box;
					.goods-item-wrap{
						width: 344rpx;
						margin-bottom: 20rpx;
					}
				}
				
			}
		}

		.cart-tap {
			position: fixed;
			z-index: 99;
			bottom: 220rpx;
			right: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			font-size: 44rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, .6);
		}

	}
</style>